<template>
    <div>
        <div class='addBrand'>
            <h3>用户编辑</h3>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户头像:" prop="headImage">
                    <img :src="ruleForm.headImage" alt="">
                </el-form-item>
                <el-form-item label="用户昵称:" prop="nickName">
                    <el-input disabled class='input' v-model="ruleForm.nickName"></el-input>
                    <!-- {{ruleForm.nickName}} -->
                </el-form-item>
                <el-form-item label="用户身份:" prop="roleName">
                    <el-input disabled class='input' v-model="ruleForm.roleName"></el-input>
                </el-form-item>
                <el-form-item label="用户邀请码:" prop="inviteCode">
                    <el-input disabled class='input' v-model="ruleForm.inviteCode"></el-input>
                </el-form-item>
                <el-form-item label="父级邀请码:" prop="parentInviteCode">
                    <el-input disabled class='input' v-model="ruleForm.parentInviteCode"></el-input>
                </el-form-item>
                <el-form-item label="用户wxUid:" prop="wxUid">
                    <el-input disabled class='input' v-model="ruleForm.wxUid"></el-input>
                </el-form-item>
                <el-form-item label="用户姓名:" prop="personName" v-if="ruleForm.userStatus === 0 || ruleForm.userStatus === 1">
                    <el-input  class='input' v-model="ruleForm.personName"></el-input>
                </el-form-item>
                <el-form-item label="用户姓名:" prop="personName" v-else>
                    <el-input disabled class='input' v-model="ruleForm.personName"></el-input>
                </el-form-item>
                <!-- <el-form-item v-if="ruleForm.weixinId != null" label="微信账号:" prop="weixinId">
                    <el-input disabled class='input' v-model="ruleForm.weixinId"></el-input>
                </el-form-item> -->
   
                <el-form-item label="微信账号:" prop="weixinId" v-if="ruleForm.userStatus === 0 || ruleForm.userStatus === 1">
                    <el-input  class='input'  v-model="ruleForm.weixinId"></el-input>
                </el-form-item>
                <el-form-item label="微信账号:" prop="weixinId" v-else>
                    <el-input disabled class='input'  v-model="ruleForm.weixinId"></el-input>
                </el-form-item>
                <!-- <el-form-item label="支付宝号:" prop="alipayId" v-if="ruleForm.alipayId != null ">
                    <el-input disabled class='input' v-model="ruleForm.alipayId"></el-input>
                </el-form-item> -->
        
                <el-form-item label="支付宝号:" prop="alipayId" v-if="ruleForm.userStatus === 0 || ruleForm.userStatus === 1">
                    <el-input class='input'  v-model="ruleForm.alipayId"></el-input>
                </el-form-item>
                <el-form-item label="支付宝号:" prop="alipayId"  v-else>
                    <el-input class='input' disabled  v-model="ruleForm.alipayId"></el-input>
                </el-form-item>
                <el-form-item label="手机号码:" prop="verifyPhone" v-if="ruleForm.userStatus === 0 || ruleForm.userStatus === 1">
                    <el-input  class='input' v-model="ruleForm.verifyPhone"></el-input>
                </el-form-item>
            
                <el-form-item label="手机号码:" prop="verifyPhone"  v-else>
                    <el-input  class='input' disabled v-model="ruleForm.verifyPhone"></el-input>
                </el-form-item>
                <el-form-item label="创建时间:" prop="createTime">
                    {{this.$formate(ruleForm.createTime, 'yyyy-MM-dd hh:mm:ss')}}
                
                </el-form-item>
                <el-form-item label="访问时间:" prop="latestOnlinetime">
                    {{this.$formate(ruleForm.latestOnlinetime, 'yyyy-MM-dd hh:mm:ss')}}
                </el-form-item>
                <el-form-item v-if="ruleForm.userStatus === 0 || ruleForm.userStatus === 1" label="设置用户:" >
                    <template>
                        <el-radio-group v-model="actionType">
                            <el-radio :label="2">设置代购</el-radio>
                            <el-radio :label="3">设置经理</el-radio>
                            <el-radio :label="4">设置总监</el-radio>
                        </el-radio-group>
                    </template>
                </el-form-item>
                
                <el-form-item class='right-btn'>
                    <el-button v-if="(ruleForm.userStatus === 0 || ruleForm.userStatus === 1) && actionType != '' && ruleForm.parentInviteCode != null" class='' type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    <el-button class='' type="primary" @click="goBack('ruleForm')">返回</el-button>
                </el-form-item>
            </el-form>

        </div>
    </div>
</template>
<script>
import { searchUser, airdropRole } from "../../data/postData";
export default {
    data() {
        return {
            ruleForm: {
                nickName:'',
                headImage:'',
                personName:'',
                alipayId:'',
                userStatus:'',
                roleName:'',
                inviteCode:'',
                parentInviteCode:'',
                wxUid:'',
                weixinId:'',
                alipayId:'',
                verifyPhone:'',
                createTime:'',
                latestOnlinetime:''
            },
            actionType:'',
            disabled:false,
            uploadLoading: false,
            rules: {
           
            }
        };
    },
    mounted() {
        var id = this.$route.params.id,
            params = {
                data: {
                    name: id
                }
            };
        this.$fetch.post(searchUser, params).then(res => {
            this.ruleForm = res.data[0];
            this.imageUrl = res.data.url;
        });
    },
    methods: {
        goBack() {
            this.$router.go(-1);
        },
        submitForm() {
            if(this.ruleForm.weixinId === '' || this.ruleForm.weixinId == null){
                this.$message({
                    message:'微信账号不能为空',
                    type: 'warning',
                    duration:1000
                })
            }else if(this.ruleForm.verifyPhone === '' || this.ruleForm.verifyPhone == null){
                this.$message({
                    message:'手机号码不能为空',
                    type: 'warning',
                    duration:1000
                })
            }else if( !/^1[34578][0-9]{9}$/.test(this.ruleForm.verifyPhone)){
                this.$message({
                    message:'手机号码格式不正确',
                    type: 'warning',
                    duration:1000
                })
            }else if(this.ruleForm.personName === '' || this.ruleForm.personName == null){
                this.$message({
                    message:'用户姓名不能为空',
                    type: 'warning',
                    duration:1000
                })
            }else {
                var params = {
                    "data" :{
                        "wxUid": this.ruleForm.wxUid,
                        "verifyPhone": this.ruleForm.verifyPhone,
                        "personName": this.ruleForm.personName,
                        "weixinId": this.ruleForm.weixinId,
                        "actionType": this.actionType,
                        "alipayId": this.ruleForm.alipayId
                    }
                }
                this.$confirm("确认修改并提交？").then(_ => {
                    this.$fetch.post(airdropRole, params).then(res => {
                        this.$message({
                            message:res.message,
                            type: 'success',
                            duration:1000
                        })
                        setTimeout(()=>{
                            this.$router.go(-1)
                        },1200)
                    }).catch(err => {
                        this.$message({
                            message:err.message,
                            type: 'error',
                            duration:1000
                        })
                    })
                })
            }
        }
    }
};
</script>
<style scoped lang="less">
.addBrand {
    width: calc(~"100% - 250px");
    margin-top: 66px;
    margin-left: 230px;
    float: left;
    h3 {
        margin: 20px 0px;
    }
    .input {
        width: 50%;
    }
}
.avatar-uploader {
    height: 200px;
    width: 200px;
    border: 1px dashed #333;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.el-upload {
    width: 200px;
    height: 200px;
    text-align: center;
    border: 1px solid green;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.right-btn {
   float:right;
}
.upload {
    display: block;
    width: 100px;
    height: 100px;
    border: 1px dotted #ccc;
    position: relative;
    input {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 999;
        cursor: pointer;
    }
    i {
        font-size: 80px;
        color: #ccc;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
    }
}
.prevImg {
    position: relative;
    display: inline-block;
    & + .prevImg {
        margin-left: 10px;
    }
    img {
        margin-top: 15px;
    }
    i {
        cursor: pointer;
    }
    i.el-icon-error {
        position: absolute;
        right: -8px;
        top: 4px;
        font-size: 20px;
        color: #ec5051;
        cursor: pointer;
    }
    i.el-icon-back {
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 20px;
        color: #409eff;
    }
}
.upload {
    display: block;
    width: 100px;
    height: 100px;
    border: 1px dotted #ccc;
    position: relative;
    input {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 999;
        cursor: pointer;
    }
    i {
        font-size: 80px;
        color: #ccc;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
    }
    span {
        color: #ccc;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 16px;
        width: 100%;
        text-align: center;
    }
}
</style>
